import React from "react";
import { useNavigate } from "react-router-dom";
import './style.scss'
const ListItem = ({ v }) => {
  const navigate = useNavigate()
   const toDetail = v => {
      navigate('/detail/' + v.id, { state: v })
    }
  return (
    <dl onClick={() => toDetail(v)} className="dl">
      <dt>
        <img src={v.coverImageUrl} alt="" />
      </dt>
      <dd>
        <h3>{v.name}</h3>
        <div>
          <p>
            {v.startTime}-{v.endTime}
          </p>
          <p>{v.location}</p>
        </div>
        <div>{v.price}</div>
      </dd>
    </dl>
  );
};

export default ListItem;
